<template>
  <div class="user-main-container">
    <!-- 流动背景 -->
    <div class="flowing-background">
      <div class="wave wave1"></div>
      <div class="wave wave2"></div>
      <div class="wave wave3"></div>
    </div>
    
    <div class="content-area">
      <div class="main-content">
        <!-- Personal Info Section -->
        <div class="personal-info-section">
          <div class="section-header">
            <h2>个人信息</h2>
            <div class="header-decoration"></div>
          </div>
          
          <!-- Avatar Section -->
          <div class="avatar-section">
            <div class="avatar-container">
              <img :src="avatar" alt="Avatar" class="editable-avatar" />
              <button class="change-avatar-button" @click="changeAvatar">
                <i class="icon-camera">📷</i>
                <span>修改头像</span>
              </button>
            </div>
          </div>

          <!-- Form Fields -->
          <div class="form-container">
            <div class="form-row">
              <div class="form-group">
                <label for="username">
                  <i class="icon">👤</i>
                  用户名
                </label>
                <input type="text" id="username" v-model="username" class="form-input" />
              </div>
              <div class="form-group">
                <label for="dob">
                  <i class="icon">🎂</i>
                  出生日期
                </label>
                <div class="input-with-icon">
                  <input type="date" id="dob" v-model="dob" class="form-input" />
                  <span class="input-decoration">⚡</span>
                </div>
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label>
                  <i class="icon">⚧</i>
                  性别
                </label>
                <div class="radio-group">
                  <label class="radio-label">
                    <input type="radio" name="gender" value="0" v-model="gender" />
                    <span class="radio-custom"></span>
                    男
                  </label>
                  <label class="radio-label">
                    <input type="radio" name="gender" value="1" v-model="gender" />
                    <span class="radio-custom"></span>
                    女
                  </label>
                </div>
              </div>
              <div class="form-group">
                <label for="contactPhone">
                  <i class="icon">📱</i>
                  联系电话
                </label>
                <input type="text" id="contactPhone" v-model="contactPhone" class="form-input" />
              </div>
            </div>

            <div class="form-row">
              <div class="form-group full-width">
                <label for="userEmail">
                  <i class="icon">📧</i>
                  邮箱
                </label>
                <input type="email" id="userEmail" v-model="userEmail" class="form-input" />
              </div>
            </div>

            <div class="form-row">
              <div class="form-group full-width">
                <label for="intro">
                  <i class="icon">💭</i>
                  一句话介绍
                </label>
                <input type="text" id="intro" v-model="intro" class="form-input" placeholder="用一句话介绍自己..." />
              </div>
            </div>

            <div class="form-row">
              <div class="form-group full-width">
                <label for="bio">
                  <i class="icon">📝</i>
                  个人简介
                </label>
                <textarea id="bio" v-model="bio" class="form-textarea" placeholder="详细介绍一下自己吧..."></textarea>
              </div>
            </div>
          </div>

          <!-- Action Buttons -->
          <div class="form-actions">
            <button class="cancel-button" @click="cancelEdit">
              <i class="btn-icon">↩️</i>
              取消
            </button>
            <button class="save-button" @click="saveProfile">
              <i class="btn-icon">💾</i>
              保存
              <span class="btn-decoration">⚡</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'UserMain',
  data() {
    return {
      userId: null,
      loginId: parseInt(localStorage.getItem('loginId') || '4'),
      username: '',
      dob: '',
      gender: null,
      intro: '',
      bio: '',
      avatar: 'https://via.placeholder.com/100',
      contactPhone: '',
      userEmail: '',
      password: '',
      selectedFile: null,
      originalUserInfo: null
    };
  },
  async mounted() {
    await this.fetchUserProfile();
  },
  methods: {
    async fetchUserProfile() {
      try {
        const response = await axios.get(`http://localhost:8080/mw/UserByLoginId?loginId=${this.loginId}`);
        const userData = response.data;
        if (userData) {
          this.userId = userData.userId;
          this.username = userData.userName;
          this.avatar = userData.userAvatar || 'https://via.placeholder.com/100';
          this.intro = userData.signature;
          this.gender = Number(userData.gender) === 1 ? 0 : (Number(userData.gender) === 2 ? 1 : null);
          this.bio = userData.personalIntroduction;
          this.dob = userData.dateOfBirth;
          this.contactPhone = userData.contactPhone;
          this.userEmail = userData.userEmail;
          this.password = userData.password;
          this.originalUserInfo = {...userData};
        }
      } catch (error) {
        console.error('Error fetching user profile:', error);
        alert('获取个人信息失败！');
      }
    },
    
    changeAvatar() {
      const fileInput = document.createElement('input');
      fileInput.type = 'file';
      fileInput.accept = 'image/*';
      
      fileInput.onchange = (e) => {
        const file = e.target.files[0];
        if (file) {
          this.selectedFile = file;
          this.uploadAvatar();
        }
      };
      
      fileInput.click();
    },
    
    async uploadAvatar() {
      if (!this.selectedFile || !this.userId) {
        return;
      }
      
      const formData = new FormData();
      formData.append('file', this.selectedFile);
      formData.append('userId', this.userId);
      
      try {
        const response = await axios.post('http://localhost:8080/mw/uploadAvatar', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        
        if (response.data) {
          this.avatar = response.data.avatarUrl;
          alert('头像上传成功！');
        }
      } catch (error) {
        console.error('Error uploading avatar:', error);
        alert('头像上传失败！');
      }
    },

    async saveProfile() {
      try {
        const userInfo = {
          userId: this.userId,
          loginId: this.loginId,
          userName: this.username || this.originalUserInfo.userName,
          signature: this.intro || this.originalUserInfo.signature,
          gender: Number(this.gender) === 0 ? 1 : (Number(this.gender) === 1 ? 2 : null) || this.originalUserInfo.gender,
          contactPhone: this.contactPhone || this.originalUserInfo.contactPhone,
          personalIntroduction: this.bio || this.originalUserInfo.personalIntroduction,
          userEmail: this.userEmail || this.originalUserInfo.userEmail,
          dateOfBirth: this.dob || this.originalUserInfo.dateOfBirth,
          password: this.password || this.originalUserInfo.password,
          userAvatar: this.avatar || this.originalUserInfo.userAvatar
        };

        const response = await axios.put('http://localhost:8080/mw/updateUser', userInfo);

        if (response.data > 0) {
          alert('个人信息已保存！');
          await this.fetchUserProfile();
        } else {
          alert('保存失败，请重试。');
        }
      } catch (error) {
        console.error('Error saving profile:', error);
        alert('保存个人信息失败！');
      }
    },
    
    cancelEdit() {
      this.fetchUserProfile();
      alert('已取消编辑。');
    },
  },
};
</script>

<style scoped>
/* 流动背景动画 */
@keyframes flow {
  0% {
    transform: translateX(-100%) translateY(0%) rotate(0deg);
  }
  50% {
    transform: translateX(50%) translateY(-50%) rotate(180deg);
  }
  100% {
    transform: translateX(100%) translateY(0%) rotate(360deg);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* General Layout */
.user-main-container {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

.flowing-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 25%, #90caf9 50%, #64b5f6 75%, #42a5f5 100%);
  z-index: -1;
}

.wave {
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(173, 216, 230, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: flow 20s infinite linear;
}

.wave1 {
  top: -50%;
  left: -50%;
  animation-delay: 0s;
  animation-duration: 25s;
}

.wave2 {
  top: -30%;
  right: -50%;
  animation-delay: -8s;
  animation-duration: 30s;
  background: radial-gradient(circle at center, rgba(135, 206, 250, 0.2) 0%, transparent 70%);
}

.wave3 {
  bottom: -50%;
  left: -30%;
  animation-delay: -15s;
  animation-duration: 35s;
  background: radial-gradient(circle at center, rgba(176, 224, 230, 0.25) 0%, transparent 70%);
}

.content-area {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  position: relative;
  z-index: 1;
}

.main-content {
  width: 100%;
  max-width: 900px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-radius: 25px;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.5);
  overflow: hidden;
  animation: slideUp 0.8s ease-out, float 6s ease-in-out infinite;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Section Header */
.personal-info-section {
  padding: 50px;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
  position: relative;
}

.section-header h2 {
  font-size: 36px;
  font-weight: 700;
  color: #1a365d;
  margin: 0;
  position: relative;
  display: inline-block;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-decoration {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #42a5f5, #64b5f6, #90caf9);
  margin: 20px auto;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(66, 165, 245, 0.3);
}

/* Avatar Section */
.avatar-section {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}

.avatar-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.editable-avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.9);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.2),
    0 0 0 3px rgba(66, 165, 245, 0.2);
  transition: all 0.4s ease;
  animation: float 4s ease-in-out infinite;
}

.editable-avatar:hover {
  transform: scale(1.05);
  box-shadow: 
    0 20px 45px rgba(0, 0, 0, 0.25),
    0 0 0 3px rgba(66, 165, 245, 0.4);
}

.change-avatar-button {
  background: linear-gradient(135deg, #42a5f5, #1e88e5);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(66, 165, 245, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.change-avatar-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(66, 165, 245, 0.6);
  background: linear-gradient(135deg, #1e88e5, #1565c0);
}

.change-avatar-button:active {
  transform: translateY(-1px);
}

.icon-camera {
  font-size: 16px;
}

/* Form Container */
.form-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.form-row {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.form-group {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  min-width: 100%;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 10px;
  font-size: 15px;
}

.form-group .icon {
  font-size: 18px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.form-input, .form-textarea {
  padding: 15px 20px;
  border: 2px solid rgba(66, 165, 245, 0.2);
  border-radius: 15px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  font-family: inherit;
}

.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: #42a5f5;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 4px rgba(66, 165, 245, 0.1);
  transform: translateY(-1px);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-decoration {
  position: absolute;
  right: 15px;
  color: #ffa726;
  font-size: 18px;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Radio Group */
.radio-group {
  display: flex;
  gap: 25px;
  margin-top: 10px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 500;
  color: #4a5568;
  padding: 10px 0;
  transition: color 0.3s ease;
}

.radio-label:hover {
  color: #2d3748;
}

.radio-label input[type="radio"] {
  display: none;
}

.radio-custom {
  width: 20px;
  height: 20px;
  border: 2px solid #cbd5e0;
  border-radius: 50%;
  position: relative;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
}

.radio-label input[type="radio"]:checked + .radio-custom {
  border-color: #42a5f5;
  background: #42a5f5;
  box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.2);
}

.radio-label input[type="radio"]:checked + .radio-custom::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Action Buttons */
.form-actions {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 50px;
  padding-top: 40px;
  border-top: 1px solid rgba(66, 165, 245, 0.2);
}

.save-button, .cancel-button {
  padding: 15px 35px;
  border: none;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.save-button {
  background: linear-gradient(135deg, #4caf50, #45a049);
  color: white;
  box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
}

.save-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(76, 175, 80, 0.6);
  background: linear-gradient(135deg, #45a049, #388e3c);
}

.cancel-button {
  background: linear-gradient(135deg, #90a4ae, #78909c);
  color: white;
  box-shadow: 0 8px 25px rgba(144, 164, 174, 0.4);
}

.cancel-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(144, 164, 174, 0.6);
  background: linear-gradient(135deg, #78909c, #607d8b);
}

.btn-icon {
  font-size: 18px;
}

.btn-decoration {
  color: #ffa726;
  margin-left: 5px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Responsive Design */
@media (max-width: 768px) {
  .personal-info-section {
    padding: 30px 20px;
  }
  
  .form-row {
    flex-direction: column;
    gap: 25px;
  }
  
  .form-group {
    min-width: 100%;
  }
  
  .form-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .save-button, .cancel-button {
    width: 100%;
    max-width: 250px;
    justify-content: center;
  }
  
  .main-content {
    margin: 10px;
    border-radius: 20px;
  }
}

/* Loading and Hover Effects */
.form-input:hover, .form-textarea:hover {
  border-color: rgba(66, 165, 245, 0.4);
  transform: translateY(-1px);
}

.form-group:hover .icon {
  transform: scale(1.15);
  transition: transform 0.2s ease;
}

/* Smooth transitions for all interactive elements */
* {
  transition: all 0.3s ease;
}

/* Additional glassmorphism effects */
.form-input, .form-textarea, .radio-custom {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.form-input:focus, .form-textarea:focus {
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.05),
    0 0 0 4px rgba(66, 165, 245, 0.1);
}
</style>